<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center" class="registercontent">
    <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/register.jpg" alt="" style="width: 100%">
      </div>
      <div style="flex: 1; display: flex; align-items: center; justify-content: center">
        <el-form :model="registerForm" style="width: 80%" :rules="rules" ref="loginRef">
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">欢迎注册</div>
          <el-form-item prop="email">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="注册邮箱" v-model="registerForm.email"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="registerForm.pwd"></el-input>
          </el-form-item>
          <el-form-item prop="name">
            <el-input prefix-icon="el-icon-lock" size="medium"  placeholder="请输入昵称" v-model="registerForm.name"></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input prefix-icon="el-icon-lock" size="medium"  placeholder="请输入电话" v-model="registerForm.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
          </el-form-item>
          <div style="display: flex">
            <div style="flex: 1.5">已经有账号？请 <span style="color: #0f9876; cursor: pointer" @click="login">登录</span></div>
            <div style="flex: 0.5; text-align: right"><span style="color: #0f9876; cursor: pointer">忘记密码</span></div>
          </div>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup>
import {reactive} from 'vue';
import router from "@/router";
import {toRegister} from "@/request/LoginService";
import { FormRules} from "element-plus";
import {UserFormImpl} from "@/type/UserAction";


//数据结果显示格式
const registerForm =reactive(new UserFormImpl()).userFormImpl

//账号不可以为空
const validatePass1 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入邮箱'))
  } else {
    callback()
  }
}
//密码不可为空
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  }  else {
    callback()
  }
}

//表单规则，2个验证都通过才可
const rules = reactive<FormRules<typeof registerForm>>({
  email: [{ validator: validatePass1, trigger: 'blur' }],
  pwd: [{ validator: validatePass2, trigger: 'blur' }],
})
//注册
const  register = ()=>{
  toRegister(registerForm).then(
      (res)=>{
        console.log(res)
        if(res.status === 200){//如果http请求成功
          console.log(res.data);
          //开始注册
          if(res.data.code=='200'){
            router.push({path:"/"})
            console.log('注册成功！')
          }else{
            console.log('注册失败！')
          }
        }else {//如果http请求成功不成功
          console.log('请求失败！')
        }
      }
  ).catch(
      (res)=>{
        console.log(res)
      }
  )
}

//注册
const login = ()=>{
  router.push({path:"/"})
}
</script>

<style scoped>
.registercontent {
  display: flex;
  flex-direction: column;
  background-image: url("../assets/registerBack.jpg");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;


  justify-content: center;
  align-items: center;
}

</style>